<template>
  <div>
    <h-box>
      <div slot="header" class="hui-flex hui-flex--y-center">
        <div class="hui-flex__none">
          <h-image :src="app.src" size="10vw" border-radius="2px" mode="background-image"></h-image>
        </div>
        <div class="hui-flex__auto hui-ml-2">
          <h2 class="hui-font-weight-bold">{{ app.name }}</h2>
          <p v-html="app.desc"></p>
          <el-button @click="handleOpen" type="primary" size="medium" :disabled="appStatus === 1" :loading="loading">{{ appStatus === 0 ? '立即开通' : '已开通' }}</el-button>
        </div>
      </div>
    </h-box>

    <h-box header="应用详情">
      <article>
        <h-image v-for="(item, index) in app.detail" :key="index" :src="item" width="600px" flex></h-image>
      </article>
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      appid: '',
      app: {
        src: '',
        name: '',
        desc: '',
        appid: '',
        detail: ''
      },
      appStatus: NaN,
      loading: false
    }
  },
  computed: {},
  methods: {
    // 获取页面参数
    getQuery () {
      const query = this.$route.query
      const queryArr = Object.keys(query)
      if (queryArr === 0) {
        this.$message.error('缺少页面参数')
      } else if (queryArr.indexOf('appid') < 0) {
        this.$message.error('缺少appid')
      } else if (query.appid.length === 0) {
        this.$message.error('appid不能为空')
      } else {
        this.appid = query.appid
      }
    },

    // 获取应用信息
    getApp () {
      // const appid = this.appid
      const res = {
        src: this.$random.randomEnum(this.$store.state.image),
        name: 'i点餐(茶饮连锁版)',
        desc: '顾客:&nbsp;自助手机点单，方便快捷<br>门店:&nbsp;自动接单打印，省时省人',
        appid: 'order',
        detail: [
          this.$random.randomEnum(this.$store.state.image),
          this.$random.randomEnum(this.$store.state.image),
          this.$random.randomEnum(this.$store.state.image)
        ]
      }
      this.app = res
    },

    // 获取商户应用开通状态
    getAppStatus () {
      const res = 0
      this.appStatus = res
    },

    // 页面加载
    async loadPage () {
      await this.getQuery()
      await this.getApp()
      await this.getAppStatus()
    },

    // 跳转到应用的页面
    goApp () {
      const appid = this.appid
      let appPath
      switch (appid) {
        case 'iorder':
          appPath = 'iorder'
          break
      }
      this.$router.push({
        path: `/home/iapp/${appPath}`
      })
    },

    // 功能开通事件
    handleOpen () {
      this.loading = true
      this.$loading()
      setTimeout(() => {
        this.loading = false
        this.$loading().close()
        this.$message.success('功能开通成功！')
        this.goApp()
      }, 500)
    }
  },
  created () {
    this.loadPage()
  },
  mounted () {}
}
</script>

<style lang="less">
@import "../../../../../common/h-theme/_variable.less";
</style>
